<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:70:"D:\phpStudy\WWW\ferr\public/../application/wechat\view\cons\olist.html";i:1492392708;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>订单列表</title>
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/hdw.css">
    <link rel="stylesheet" href="__CSS__/reset.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/wechat/cons.css">
    <!-- <link rel="stylesheet" type="text/css" href="__CSS__/jquery.mobile-1.4.5.css"> -->
    <link rel="stylesheet" type="text/css" href="__CSS__/mobiscroll.custom-2.5.2.min.css">
    <script src="__JS__/vue.js"></script>
    <script src="__JS__/libs/jquery-2.0.2.min.js"></script>
    <script src="__JS__/bootstrap/bootstrap.min.js"></script>
    <script src="__JS__/hdw.js"></script>
    <script type="text/javascript" src="__JS__/mobiscroll.custom-2.5.2.min.js""></script>
    <!-- <script type="text/javascript" src="__JS__/jquery.mobile-1.4.5.js"></script> -->
    <style>
        .erweima{
            display: block;
            height:30px;
            width: 30px;
            background: url("__IMG__/erweima1.png") no-repeat;
            background-size: cover;
            position: relative;
            top: 10px;
        }
        .shuaxin{
            display: inline-block;
            height: 22px;
            width: 22px;
            background: url("__IMG__/shuaxin.png") no-repeat;
            background-size: cover;
        }

        .myEquip{
            position: relative;
            top: -4px;
            margin-right: 10px;
        }
        .section1 .row{
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #ddd;
            text-align: center;
        }
        .equipment{
            height: 27px;
            width: 26px;
        }
        .down{
            display: inline-block;
            height:22px;
            /*background: url("__IMG__/Down.png") no-repeat;*/
            /*background-size: cover;*/
        }
        .down.rotate{
            -webkit-transition:all 0.5s ease-in;
            transform-origin:50% 50%;
            transform:rotate(180deg);
            -ms-transform:rotate(180deg);   /* IE 9 */
            -moz-transform:rotate(180deg);  /* Firefox */
            -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
            -o-transform:rotate(180deg);    /* Opera */
        }
        .equipmentList.hide{
            display: none;
        }
        .section1{
            margin-top: 5px;
        }
        .sectionTop{
            margin-top: 70px;
        }

    </style>
</head>
<body>
<div id="contentBox">
    <nav class="navBox">
        <ul>
            <li @click="actShow($event,index)" v-for="(v,index) in navList" :class="index==active?'active':''">{{v.name}}</li>
        </ul>
        <span class="hk"></span>
    </nav>
    <div class="main">
        <div class="time">
            <span>
                <input id="startTime" placeholder="开始时间">
            </span>
            
            <i>----</i>
            
            <span>
                <input id="endTime" placeholder="结束时间">
            </span>
            <!-- <b class="date"></b> -->
        </div>
        <ul class="orderList">
            <?php if(is_array($data) || $data instanceof \think\Collection || $data instanceof \think\Paginator): $i = 0; $__LIST__ = $data;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$_v): $mod = ($i % 2 );++$i;?>
                <li class="item">
                    <div class="title">
                        <span class="oNum"><b>订单号:</b><?php echo $_v['oid']; ?></span>
                        <span class="oState">已完成</span>
                    </div>
                    <div class="cont">
                        <div class="text">空调热水器冰箱电风扇小牧</div>
                        <div class="price">
                            <span>
                                价格:<b><?php echo $_v['acamount']; ?></b>元
                            </span>
                        </div>
                    </div>
                    <div class="foot">
                        <span>删除</span>
                    </div>
                </li>
            <?php endforeach; endif; else: echo "" ;endif; ?>
        </ul>
    </div>
    <!-- <div id="timeModal">
        <div class="modale">
            <div class="title">时间设置<i>&times;</i></div>
            <ul class="main">
                <li>
                    <label>开始时间</label>
                    <input type="">
                </li>
                <li>
                    <label>结束时间</label>
                    <input type="">
                </li>
            </ul>
            <div class="btnBox">
                <span class="btn">确定</span>
            </div>
        </div>
    </div> -->
</div>
<script>
    var vm = new Vue({
        el:"#contentBox",
        data:{
            active:0,
            navList:[
                {name:"全部",view:"tab1"},
                {name:"已完成",view:"tab2"},
                {name:"未完成",view:"tab3"}
            ]
        },
        methods:{
            actShow:function(e,i){
                this.active = i;
                var w = $(".navBox ul li").eq(i).outerWidth();
                var left = $(".navBox ul li").eq(i).offset().left;
                $(".navBox .hk").stop().animate({
                    left:left+"px",
                    width:w+"px"
                },300)
            }
        },
        mounted:function(){
            var w = $(".navBox ul li").eq(0).outerWidth();
            $(".navBox .hk").css({width:w+"px"});
        }
    })


    $(function(){

        var opt = {
            preset:'date', //日期
            theme:'android-ics light',//皮肤样式
            display:'modal', //显示方式
            mode:'scroller', //日期选择模式
            lang:'zh',
            dateFormat:'yy-mm-dd', // 日期格式
            setText:'确定', //确认按钮名称
            cancelText:'取消',//取消按钮
            dateOrder:'yy-mm-dd', //面板中日期排列格式
            width:'100%',
            timeWheels:'HHii', // 24小时制;
            timeFormat:'HH:ii',
            maxDate: new Date(),
            onSelect:function(val){
                var st = $("#startTime").val();
                var et = $("#endTime").val();
            }
        };
        $("#startTime").mobiscroll(opt);
        $("#endTime").mobiscroll(opt);
    })
</script>
</body>
</html>